<template>
	<view class="container">
		<view class="header">
			<image :src="headImg" mode="widthFix" class="head"></image>
			<view class="headtext">
				<view class="username">Dylan</view>
				<view class="uservip">
					<text>V1</text>
					<text>签到积分</text>
				</view>
			</view>
		</view>
		<view class="order">
			<text class="orTitle">我的订单</text>
			<view class="orderMenu">
				<view v-for="(item, index) in menulist" :key="index">
					<view class="menuItem">
						<image :src="item.imgUrl" mode="widthFix"></image>
						<text>{{ item.text }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="service">
			<text class="serTitle">我的服务</text>
			<view class="serMenu">
				<view v-for="(item, index) in serList" :key="index" @click="gopage(item.navTo)">
					<view class="serItem">
						<image :src="item.imgUrl" mode="widthFix"></image>
						<text>{{ item.text }}</text>

						<image src="../../static/yjt.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			headImg: '',
			menulist: [],
			serList: []
		};
	},
	methods: {
		gopage(url){
			uni.navigateTo({
				url
			})
		}
	},
	created() {
		let that = this;
		this.$http({
			url: '/my/headImg',
			success(res) {
				that.headImg = res.data.imgUrl;
			}
		});
		this.$http({
			url: '/my/orderMenu',
			success(res) {
				that.menulist = res.data;
			}
		});
		this.$http({
			url: '/my/serList',
			success(res) {
				that.serList = res.data;
			}
		});
	}
};
</script>

<style scoped>
.serMenu {
	display: flex;
	flex-direction: column;
}
.serItem {
	padding: 20rpx;
	color: #666666;
	font-size: 24rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.serItem text {
	flex: 1;
}
.serItem image {
	width: 40rpx;
	height: 40rpx !important;
	
	margin-right: 20rpx;
	animation: 0.7s mIAnimate;
}

.service {
	width: 90vw;

	margin: 0 auto;
	background-color: #fff;
	padding: 5vw;
	box-sizing: border-box;
	border-radius: 10vw;
}
.menuItem {
	display: flex;
	flex-direction: column;
	width: 10vw;
	font-size: 24rpx;
	color: #666;
	align-items: center;
	justify-content: space-between;
	animation: 0.7s mIAnimate;
}
@keyframes mIAnimate {
	from {
		transform: scale(0, 0);
	}
	to {
		transform: scale(1, 1);
	}
}
.menuItem image {
	width: 8vw;
	height: 8vw !important;
}
.order {
	width: 90vw;
	height: 25vh;
	margin: 0 auto;
	background-color: #fff;
	padding: 5vw;
	box-sizing: border-box;
	border-radius: 10vw;
	position: relative;
	top: -10vw;
}
.orTitle,
.serTitle {
	font-size: 28rpx;
	color: #666;
}
.orderMenu {
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin: 3vh 0;
}
.header {
	width: 100vw;
	height: 30vh;
	background-color: #ffe7c5;
	border-bottom-left-radius: 10vh;
	border-bottom-right-radius: 10vh;
	padding: 0 15vw;
	padding-bottom: 5vh;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}
.head {
	width: 120rpx;
}
.headtext {
	margin: 0 20rpx;
}
.username {
	color: #666;
}
.uservip {
	color: #fff;
	font-size: 20rpx;
	margin-top: 10rpx;
}
.uservip text:nth-child(1) {
	margin-right: 20rpx;
	padding: 0 15rpx;
	border-radius: 15rpx;
	background-color: rgb(253, 191, 103);
}
.uservip text:nth-child(2) {
	padding: 0 15rpx;
	border-radius: 15rpx;
	background-color: rgb(253, 191, 103);
}
.container {
	height: 100vh;
	background-color: rgb(249, 249, 249);
}
</style>
